<template>
  <demoBlock title="自定义内容" padding>
    <vcu-popover v-model:show="showPopover" placement="top-start" @select="onSelect">
      <vcu-grid
        square
        clickable
        :border="false"
        column-num="3"
        style="width: 240px"
      >
        <vcu-grid-item
          v-for="i in 6"
          :key="i"
          text="选项"
          icon="edit"
          @click="showPopover = false"
        />
      </vcu-grid>
      <template #reference>
        <vcu-button type="primary">自定义内容</vcu-button>
      </template>
    </vcu-popover>
  </demoBlock>
</template>

<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    const showPopover = ref(false);
    const onSelect = (action) => console.info(action.text);
    return { showPopover,onSelect };
  },
});
</script>
